<template>
  <div class="category_container">
    <div class="left_container">
      <div>
        <CategoryItem v-for="(item,index) in category"
        :key="index"
        :item="item"
        :selectIndex="selectIndex"
        :index="index"
        @changeSelectIndex="changeSelectIndex"/>
      </div>
    </div>
    <div class="right_container">
      <div class="right_wrapper">
        <div v-for="(item,index) in  subCategory"
        :key="index"
        class="right_item_container">
            <div>
              <img :src="item.icon"/>
            </div>
            <div>{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import CategoryItem from "../components/CategoryItem";
export default {
  name: 'Home',
  components: {
    CategoryItem
  },
  data(){
    return{
      all:[],
      category:[],
      subCategory:[],
      selectIndex:0
    }
  },
  methods:{
    changeSelectIndex(index){
      this.selectIndex = index;
      if(this.selectIndex===0){
        console.log("111")
      }
      this.subCategory=[];
      var tempCid = this.category[this.selectIndex].id;
      this.all.forEach((element)=>{
        if(element.pid===tempCid){
          this.subCategory.push(element)
        }
      })
    }
  },
  mounted(){
    this.$netClient.getStoreCategory().then((response)=>{
      console.log(response.data.data)
      this.all = response.data.data;
      var tempData = response.data.data;
      this.category.push({
        name:"所有分类",
        pid:0
      })
      tempData.forEach((element)=>{
        if(element.pid===0){
          this.category.push(element)
        }
        if(element.pid !== 0){
          this.subCategory.push(element)
        }
      })
      
    }).catch(()=>{

    })
  }
}
</script>

<style scoped>
.category_container
{
  width: 100%;
  height: 90vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.left_container
{
  width: 25%;
  height: 100%;
  border: 1px solid red;
  overflow: scroll;
}

.right_container
{
  width: 75%;
  height: 100%;
  border: 1px solid red;
  overflow: scroll;
}

.right_wrapper
{
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.right_item_container
{
  width: 100px;
}

.right_item_container img
{
  width: 100px;
}
</style>